<template>
    <div class="buygoodr">
        <head-top head-title="" go-back='true'></head-top>
        <section class="buy_container">
            <ul class="goodinfo">
                <li class="goodimg">
                    <img :src="goodimg">
                </li>
                <li class="gooddesc">
                    <span>{{ gooddesc }}</span>
                </li>
            </ul>
            <ul class="youraddress">
                <li class="adspan">
                    <span>收货<br>地址</span>
                </li>
                <li class="adinfo">
                    <span>{{ contact }}</span>
                    <br>
                    <span>{{ addressDetail }}</span>
                </li>
            </ul>
        </section>

        <section class="buyfoot">
            <span class="pricespan">实付款:￥{{ goodprice }}</span>
            <span class="msspan" @click="goAlipay">确定</span>
        </section>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import {
        getDefaultAddress,
        alipay,
    } from 'src/service/getData'
    import loading from 'src/components/common/loading'
    import {loadMore, getImgPath} from 'src/components/common/mixin'
    import headTop from 'src/components/header/head'

    export default {
        data() {
            return {
                goodimg: null,
                goodprice: 0,
                gooddesc: '',
                addressDetail: '',
                contact: '',
            }
        },
        created() {

            this.geohash = this.$route.query.geohash;
            userId = this.userInfo.id;

        },
        activated() {
            this.initData();
            this.windowHeight = window.innerHeight;
        },
        mounted() {
            this.initData();
        },
        beforeDestroy() {
        },
        mixins: [loadMore, getImgPath],
        components: {
            loading,
            headTop,
        },
        computed: {
            ...mapState([
                'userInfo',
            ]),
        },
        methods: {
            ...mapMutations([]),
            //初始化时获取基本数据
            async initData() {
                this.goodimg = this.$route.query.gooddetail.images[0].image;
                this.gooddesc = this.$route.query.gooddetail.goods_brief;
                this.goodprice = this.$route.query.gooddetail.goods_price;
                this.goodId = this.$route.query.gooddetail.id;
                console.log(this.$route.query.gooddetail);
                //this.userInfo=getUser()
                let addressInfo = await getDefaultAddress(this.userInfo.username);
                console.log('----initData--' + addressInfo.signer_mobile);
                this.contact = addressInfo.signer_name + addressInfo.signer_mobile;
                this.addressDetail = addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.address;
                this.hideLoading();
            },

            async goAlipay() {
                console.log('-------goAlipay---', this.goodId)
                let res = await alipay(this.gooddesc, this.goodprice, this.goodId);
                let pay_url = res.alipay_url;
                window.location.href = pay_url;
                console.log(pay_url);
            },

            //隐藏动画
            hideLoading() {
                this.showLoading = false;
            },

            goback() {
                this.$router.go(-1);
            }
        },
        watch: {
            //showLoading变化时说明组件已经获取初始化数据，在下一帧nextTick进行后续操作
            showLoading: function (value) {
                if (!value) {
                    this.$nextTick(() => {
                    })
                }
            },
            userInfo: function (value) {
                this.initData()
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    @keyframes mymove {
        0% {
            transform: scale(1)
        }
        25% {
            transform: scale(.8)
        }
        50% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(.9)
        }
        100% {
            transform: scale(1)
        }
    }

    @-moz-keyframes mymove {
        0% {
            transform: scale(1)
        }
        25% {
            transform: scale(.8)
        }
        50% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(.9)
        }
        100% {
            transform: scale(1)
        }
    }

    @-webkit-keyframes mymove {
        0% {
            transform: scale(1)
        }
        25% {
            transform: scale(.8)
        }
        50% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(.9)
        }
        100% {
            transform: scale(1)
        }
    }

    @-o-keyframes mymove {
        0% {
            transform: scale(1)
        }
        25% {
            transform: scale(.8)
        }
        50% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(.9)
        }
        100% {
            transform: scale(1)
        }
    }

    .buy_container {
        display: block;
        margin-top: 2.15em;

        ul {
            white-space: nowrap;
            padding: 0.1em;
            clear: right;
            overflow: hidden;

            li {
                display: inline-block;
                white-space: nowrap;
            }
        }
    }

    .goodinfo {
        text-align: left;
        list-style: none;
        padding: 0.1em;
        clear: right;
        background-color: #fff;
        vertical-align: middle;

        img {
            @include wh(3.7rem, 3.7rem);
            border-radius: 0.1em;
        }

        .gooddesc {
            @include font(0.62em, 0.8rem, 'PingFangSC-Regular');
            margin-bottom: 0.3em;
            white-space: normal;
            word-wrap: break-word;
            margin: 0.1em;
            padding-right: 6.33em;
        }
    }

    .youraddress {
        text-align: left;
        list-style: none;
        padding: 0.1em;
        clear: right;
        background-color: #fff;
        margin-top: 0.3em;

        .adspan {
            span {
                display: inline-block;
                @include font(1em, 1rem, 'PingFangSC-Regular');
                margin-bottom: 0.3em;
                white-space: normal;
                color: grey;
            }
        }

        .adinfo {
            float: right;
            @include font(0.52em, 0.8rem, 'PingFangSC-Regular');
            white-space: normal;
            word-wrap: break-word;
            margin: 0.1em;
            text-align: right;
            width: 19em;

            span {
                color: grey;
            }
        }

    }

    hr {
        height: 0.1em;
        border: none;
        border-top: 0.01em solid #9f9f9ff9;
        width: 14em;
        display: block;
        clear: right;
        margin-bottom: 0em !important;
        margin-top: 0em !important;
    }

    .buyfoot {
        background-color: #fff;
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;
        @include wh(100%, 1.95rem);
        display: flex;
        box-shadow: 0 -0.026667rem 0.053333rem rgba(0, 0, 0, .1);
        font: 0.59em/1.04rem "PingFangSC-Regular";

        .pricespan {
            width: 80%;
            vertical-align: middle;
            margin-top: 0.82em;
        }

        .msspan {
            text-align: center;
            padding-top: 0.82em;
            background-color: red;
            width: 20%;
            color: white;
        }

        .buybutton {
            width: 10.3em;
            height: 1.2em;
            margin-left: 20em;
            margin-top: 1em;
            @include font(0.52em, 1.04rem, 'PingFangSC-Regular');

            span {
                display: inline-block;
                background-color: red;
                color: #ffffff;
                border-radius: 0.8em;
                width: 3.7em;
                text-align: center;
                height: 1.9em;

            }
        }
    }

    .screen_cover {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .3);
        z-index: 11;
    }

    .move_dot {
        position: fixed;
        bottom: 30px;
        left: 30px;

        svg {
            @include wh(.9rem, .9rem);
            fill: #3190e8;
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-active {
        opacity: 0;
    }

    .fade-choose-enter-active, .fade-choose-leave-active {
        transition: opacity .5s;
    }

    .fade-choose-leave, .fade-choose-leave-active {
        display: none;
    }

    .fade-choose-enter, .fade-choose-leave-active {
        opacity: 0;
    }

    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }

    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }

    .toggle-cart-enter-active, .toggle-cart-leave-active {
        transition: all .3s ease-out;
    }

    .toggle-cart-enter, .toggle-cart-leave-active {
        transform: translateY(100%);
    }

</style>
